<template>
  <div>
    <van-nav-bar :title="changeTitle" fixed />
    <!-- 一级路由 挂载点 一般写在 App.vue 中 -->
    <router-view></router-view>
    <van-tabbar route>
      <van-tabbar-item replace to="/layout/home" icon="home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/layout/search" icon="search"
        >搜索</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      changeTitle: this.$route.meta.title, //网页刷新后的默认显示的标题
    };
  },
  //监听$route信息的变化
  watch: {
    //切换路由后显示的标题
    $route() {
      //$route上有当前路由的信息，比如标题
      console.log(this.$route); //只要切换，this.$route就会发生变化
      this.changeTitle = this.$route.meta.title;
    },
  },
};
</script>

<style></style>
